import React, { useState } from 'react';

interface UIControlPanelProps {
  currentScene: string;
  onSceneChange: (scene: 'coffee' | 'park' | 'restaurant' | 'library') => void;
  showInstructions: boolean;
  onToggleInstructions: () => void;
}

export const UIControlPanel: React.FC<UIControlPanelProps> = ({
  currentScene,
  onSceneChange,
  showInstructions,
  onToggleInstructions
}) => {
  const [isCollapsed, setIsCollapsed] = useState(false);

  const scenes = [
    { id: 'coffee', name: '咖啡厅', icon: '☕' },
    { id: 'park', name: '公园', icon: '🌳' },
    { id: 'restaurant', name: '餐厅', icon: '🍽️' },
    { id: 'library', name: '图书馆', icon: '📚' }
  ];

  const panelStyle: React.CSSProperties = {
    position: 'fixed',
    top: '20px',
    right: '20px',
    background: 'rgba(0, 0, 0, 0.85)',
    borderRadius: '15px',
    padding: isCollapsed ? '15px' : '20px',
    backdropFilter: 'blur(10px)',
    border: '1px solid rgba(255, 255, 255, 0.2)',
    zIndex: 2000,
    transition: 'all 0.3s ease',
    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
    minWidth: isCollapsed ? 'auto' : '280px'
  };

  const buttonStyle: React.CSSProperties = {
    background: 'rgba(255, 69, 132, 0.8)',
    color: 'white',
    border: 'none',
    padding: '8px 16px',
    borderRadius: '8px',
    cursor: 'pointer',
    fontSize: '14px',
    fontWeight: '500',
    transition: 'all 0.2s ease',
    marginBottom: '8px',
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    gap: '8px'
  };

  const activeButtonStyle: React.CSSProperties = {
    ...buttonStyle,
    background: 'rgba(255, 69, 132, 1)',
    boxShadow: '0 2px 8px rgba(255, 69, 132, 0.4)'
  };

  return (
    <div style={panelStyle}>
      {/* Panel Header */}
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: isCollapsed ? '0' : '15px'
      }}>
        {!isCollapsed && (
          <h3 style={{
            margin: 0,
            color: '#FFB6C1',
            fontSize: '16px',
            fontWeight: 'bold'
          }}>
            🎮 控制面板
          </h3>
        )}
        
        <button
          onClick={() => setIsCollapsed(!isCollapsed)}
          style={{
            background: 'rgba(255, 255, 255, 0.1)',
            color: 'white',
            border: 'none',
            padding: '8px',
            borderRadius: '6px',
            cursor: 'pointer',
            fontSize: '14px',
            transition: 'all 0.2s ease'
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = 'rgba(255, 255, 255, 0.2)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
          }}
        >
          {isCollapsed ? '📋' : '➖'}
        </button>
      </div>

      {/* Panel Content */}
      {!isCollapsed && (
        <>
          {/* Instructions Toggle */}
          <div style={{ marginBottom: '15px' }}>
            <button
              onClick={onToggleInstructions}
              style={{
                ...buttonStyle,
                background: showInstructions ? 'rgba(76, 175, 80, 0.8)' : 'rgba(158, 158, 158, 0.8)'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = showInstructions 
                  ? 'rgba(76, 175, 80, 1)' 
                  : 'rgba(158, 158, 158, 1)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = showInstructions 
                  ? 'rgba(76, 175, 80, 0.8)' 
                  : 'rgba(158, 158, 158, 0.8)';
              }}
            >
              <span>{showInstructions ? '👁️' : '👁️‍🗨️'}</span>
              {showInstructions ? '隐藏说明' : '显示说明'}
            </button>
          </div>

          {/* Scene Selector */}
          <div>
            <h4 style={{
              color: '#87CEEB',
              fontSize: '14px',
              margin: '0 0 10px 0',
              fontWeight: '500'
            }}>
              场景选择
            </h4>
            
            {scenes.map((scene) => (
              <button
                key={scene.id}
                onClick={() => onSceneChange(scene.id as any)}
                style={currentScene === scene.id ? activeButtonStyle : buttonStyle}
                onMouseEnter={(e) => {
                  if (currentScene !== scene.id) {
                    e.currentTarget.style.background = 'rgba(255, 69, 132, 0.9)';
                  }
                }}
                onMouseLeave={(e) => {
                  if (currentScene !== scene.id) {
                    e.currentTarget.style.background = 'rgba(255, 69, 132, 0.8)';
                  }
                }}
              >
                <span style={{ fontSize: '16px' }}>{scene.icon}</span>
                {scene.name}
                {currentScene === scene.id && (
                  <span style={{ marginLeft: 'auto', fontSize: '12px' }}>✓</span>
                )}
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  );
};

// Separate Instructions Component
export const GameInstructions: React.FC<{ visible: boolean }> = ({ visible }) => {
  if (!visible) return null;

  return (
    <div style={{
      position: 'fixed',
      top: '20px',
      left: '20px',
      background: 'rgba(0, 0, 0, 0.85)',
      color: 'white',
      padding: '20px',
      borderRadius: '15px',
      fontFamily: 'Arial, sans-serif',
      fontSize: '14px',
      zIndex: 1500,
      maxWidth: '300px',
      backdropFilter: 'blur(10px)',
      border: '1px solid rgba(255, 255, 255, 0.2)',
      boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)'
    }}>
      <h3 style={{ 
        margin: '0 0 15px 0', 
        color: '#FFB6C1',
        fontSize: '16px',
        fontWeight: 'bold',
        textAlign: 'center'
      }}>
        🎮 第一人称控制
      </h3>
      
      <div style={{ lineHeight: '1.6' }}>
        <div style={{ marginBottom: '12px' }}>
          <div style={{ 
            color: '#87CEEB', 
            fontWeight: 'bold', 
            marginBottom: '6px',
            fontSize: '13px'
          }}>
            🚶 移动控制
          </div>
          <div style={{ fontSize: '12px', marginLeft: '10px' }}>
            <div>W / ↑ → 前进</div>
            <div>S / ↓ → 后退</div>
            <div>A / ← → 左移</div>
            <div>D / → → 右移</div>
            <div style={{ color: '#FFD700' }}>Shift + W → 跑步</div>
          </div>
        </div>

        <div style={{ marginBottom: '12px' }}>
          <div style={{ 
            color: '#98FB98', 
            fontWeight: 'bold', 
            marginBottom: '6px',
            fontSize: '13px'
          }}>
            👁️ 视角控制
          </div>
          <div style={{ fontSize: '12px', marginLeft: '10px' }}>
            <div>鼠标移动 → 转动视角</div>
            <div>点击屏幕 → 锁定指针</div>
            <div>ESC → 解锁指针</div>
          </div>
        </div>

        <div style={{ 
          color: '#FFD700', 
          fontSize: '12px', 
          textAlign: 'center',
          marginTop: '15px',
          padding: '8px',
          background: 'rgba(255, 215, 0, 0.1)',
          borderRadius: '6px',
          border: '1px solid rgba(255, 215, 0, 0.3)'
        }}>
          💡 将光标指向人物显示名称<br/>点击查看详细资料
        </div>
      </div>
    </div>
  );
};

// Crosshair Component
export const Crosshair: React.FC = () => {
  return (
    <div style={{
      position: 'fixed',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      width: '20px',
      height: '20px',
      border: '2px solid rgba(255, 255, 255, 0.8)',
      borderRadius: '50%',
      pointerEvents: 'none',
      zIndex: 1000,
      boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.5)'
    }}>
      <div style={{
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        width: '4px',
        height: '4px',
        background: 'rgba(255, 255, 255, 0.9)',
        borderRadius: '50%'
      }} />
    </div>
  );
};